<template>
	<view class="common-title-wrap">
		<!-- 状态栏高度 -->
		<view class="status-bar-box" :style="{ height: statusBarHeight + 'px' }"></view>
		<!-- 胶囊按钮高度 -->
		<view
			class="menu-box"
			:style="{
				height: navBarInfo.height + 'px',
				paddingTop: navBarInfo.paddingTop + 'px',
				lineHeight: navBarInfo.height + 'px'
			}"
		>
			<text class="title-text">{{ title }}</text>
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';

const props = defineProps({
	title: {
		type: String,
		default: '默认标题'
	}
});

const emits = defineEmits(['handleInfoSuccess']);

const statusBarHeight = ref(0);
const navBarInfo = reactive({
	height: 0,
	paddingTop: 0,
	// 胶囊按钮左侧 -> 屏幕右边界
	paddingRight: 0
});

onMounted(() => {
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	const systemInfo = uni.getSystemInfoSync();
	statusBarHeight.value = systemInfo.statusBarHeight;

	navBarInfo.height = menuButtonInfo.bottom - statusBarHeight.value;
	navBarInfo.paddingTop = menuButtonInfo.top - statusBarHeight.value;
	navBarInfo.paddingRight = uni.getSystemInfo().screenWidth - menuButtonInfo.left;

	emits('handleInfoSuccess', {
		titleBoxHeight: navBarInfo.height + statusBarHeight.value
	});
});
</script>

<style lang="scss" scoped>
.common-title-wrap {
	width: 100%;

	.menu-box {
		width: 100%;
		text-align: center;

		.title-text {
			font-size: 36rpx;
			color: #fff;
		}
	}
}
</style>
